<script setup name="App">
    import { ref,reactive, watch, toRef,computed} from 'vue'
    var geyaofirstName = ref('geyao') 

    var geyaoSecondName = ref('shuaishuai')

    const handleSecondName = () => {
        AllName.value += '111'
    }
   const AllName = computed({
    //   return 
       set(val){
        const [v1,v2]=val.split('-')
         console.log(v1,v2)
         geyaofirstName.value = v1
         geyaoSecondName.value = v2
       },
       get(){
         return geyaofirstName.value.slice(0,1).toUpperCase()+''+geyaofirstName.value.slice(1) + '-' + geyaoSecondName.value
       }
    })



 
 
    </script>
    
    <template>
        <!-- <div v-for="item in geyao">{{ item.name }}-{{item.age}}</div> -->
          <input v-model="geyaofirstName"></input>
         <input v-model="geyaoSecondName"></input> 
         <div>{{ geyaofirstName.slice(0,1).toUpperCase() +''+geyaofirstName.slice(1) }}-{{ geyaoSecondName }}</div> 
         <div>{{ geyaofirstName.slice(0,1).toLowerCase() +''+geyaofirstName.slice(1) }}-{{ geyaoSecondName }}</div> 
         <div>{{ AllName }}</div> 
         <button @click="handleSecondName">修改全名</button> 
    
    </template>
    
    <style scoped>
    
    </style>
    
    
    
    
    